<template>
  <div style="margin-top: 5px">
    <titleBox text="无人机巡查" @click="show = !show"></titleBox>
    <div class="content" :style="{ height: show ? height + 'px' : '0px', transition: 'height 0.5s ease-in-out', overflow: 'hidden' }">
      <div ref="content" style="padding: 20px 10px; border: 1px solid #11afc180">
        <div class="iframeBox" @click="openSpModal" style="width: 100%; height: 200px">
          <!-- <div class="mask"></div> -->
          <iframe src="/wrjsxt/live.html" ref="iFrame1" id="iFrame1" name="iFrame1" width="100%" height="100%" frameborder="0"></iframe>
          <!-- <div class="wrj-loading">
            <div class="loading-box">
              <img class="loading-img" src="/img/myimg/wrj.png" alt="" />
              <span style="font-size: 16px; color: #fff">无人机加载中...</span>
            </div>
          </div> -->
        </div>
        <div class="btnBox">
          <div class="btn" @click="qpwrj">全屏</div>
          <div class="btn" @click="xfwrjrwModalShow">下发无人机任务</div>
        </div>
      </div>
    </div>
    <xfwrjrwModal ref="xfwrjrwModalRef" @success="success"></xfwrjrwModal>
    <spModal ref="spModalRef"></spModal>
    <qpwrjModal ref="qpwrjModalRef"></qpwrjModal>
  </div>
</template>
<script setup>
import { ref, nextTick, onMounted } from "vue"
import titleBox from "../mConponents/titleBox.vue"
import xfwrjrwModal from "../mConponents/modal/xfwrjrwModal.vue"
import qpwrjModal from "../mConponents/modal/qpwrjModal.vue"
import spModal from "../mConponents/modal/spModal.vue"
import $api from "@/utils/request.js"
const xfwrjrwModalRef = ref(null)
const qpwrjModalRef = ref(null)
const content = ref(null)
const height = ref(0)
const show = ref(false)
const iFrame1 = ref(null)

onMounted(() => {
  nextTick(() => {
    getVideo()
    height.value = content.value.offsetHeight
    // console.log(iFrame1.value.style)
    // show.value = true
  })
})

const qpwrj = () => {
  qpwrjModalRef.value.show()
}

const xfwrjrwModalShow = () => {
  xfwrjrwModalRef.value.show()
}
const spModalRef = ref(null)
const success = () => {
  spModalRef.value.show()
}
const openSpModal = () => {
  spModalRef.value.show()
}

const spUrl = ref("https://fh.dji.com/share/MCQ7FpnfgKJ")

const getVideo = async () => {
  const res = await $api.get("api/kfly/subscribestream", {
    source_id: "6854b63c522e4b09bfa3df71"
  })
  console.log("111111111111", res)
}
</script>
<style scoped lang="less">
.content {
  background-color: #001a1dcc;
  width: 330px;
  margin-top: 5px;

  .btnBox {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    gap: 10px;

    .btn {
      background: linear-gradient(180deg, rgba(0, 36, 42, 0.5) 0%, rgba(0, 67, 78, 0.5) 100%);
      border: 1px solid #57ffff;
      width: 124;
      height: 29;
      gap: 10px;
      font-size: 10px;
      border-radius: 99px;
      border-width: 1px;
      padding-top: 5px;
      padding-right: 20px;
      padding-bottom: 5px;
      padding-left: 20px;
      cursor: pointer;
    }
  }
}

.iframeBox {
  position: relative;

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #000;
    z-index: 1000;
  }
}

.wrj-loading {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: relative;

  .loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .loading-img {
    width: 80px;
    height: 65px;
  }
}
</style>
